<script setup lang="ts" name="ReaderImg">
import { watch, ref, computed } from 'vue'
import { ReloadCircleSharp } from '@vicons/ionicons5'

const { src, cover, isEnd, isStart } = defineProps<{
  src: string | undefined
  cover: string
  isEnd?: boolean
  isStart?: boolean
}>()

const loading = ref(true)
const tip = computed(() => {
  if (isEnd) {
    return '后面没有了'
  } else if (isStart) {
    return '前面没有了'
  }
  return ''
})
watch(
  () => src || isEnd || isStart,
  (newVal) => {
    if (newVal) {
      loading.value = false
    } else {
      loading.value = true
    }
  },
  { immediate: true },
)
</script>

<template>
  <div>
    <n-spin :show="loading" description="加载中，请稍等...">
      <template v-slot:icon>
        <n-icon size="24"><ReloadCircleSharp /></n-icon>
      </template>
      <div v-if="!src && cover" class="img-cover" :style="{ backgroundImage: 'url(' + cover + ')' }">
        <div class="blur">
          <h1 v-for="value in tip" :key="value">{{ value }}</h1>
        </div>
      </div>
      <img v-else :src="src" class="unselectable" draggable="false" />
    </n-spin>
  </div>
</template>

<style scoped>
img {
  max-height: 100vh;
  max-width: 50vw;
  object-fit: contain;
}
.img-cover {
  height: 100vh;
  width: 50vw;
  background-size: 30vh;
  background-repeat: repeat;
}
.blur {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1 {
  color: #000000;
  font-size: 50px;
  text-shadow:
    1px 0px 1px #cccccc,
    0px 1px 1px #eeeeee,
    2px 1px 1px #cccccc,
    1px 2px 1px #eeeeee,
    3px 2px 1px #cccccc,
    2px 3px 1px #eeeeee,
    4px 3px 1px #cccccc,
    3px 4px 1px #eeeeee,
    5px 4px 1px #cccccc,
    4px 5px 1px #eeeeee,
    6px 5px 1px #cccccc,
    5px 6px 1px #eeeeee,
    7px 6px 1px #cccccc;
}
.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -moz-user-drag: none;
  -ms-user-drag: none;
}
</style>
